<script lang='ts'>
import { defineComponent, reactive, onMounted, ref, watch } from 'vue'
import { AxiosResponse } from 'axios'
export default defineComponent({
    name: 'JxtechSyncTree'
})
</script>
<script lang='ts' setup>

//定义事件
const emit = defineEmits<{
    (e: 'node-click', row: any, column: any, event: Event): void//行点击事件
    (e: 'update:showSearch', value: boolean): void//显示搜索
}>()

const props = defineProps({
    /**加载树数据 */
    loadData: {
        type: Function,
        required: true
    },
    /**树的节点属性配置 */
    treeProps: {
        type: Object,
        default: () => {
            return {
                id: 'id',
                label: 'label',
                children: 'children',
            }
        }
    },
    /**默认展开节点 */
    defaultExpandedKeys: {
        type: Array,
        default: () => {
            return ['0']
        }
    }
})
const jxtechSyncTreeRef = ref()
const ElTreeRef = ref()

const JxtechSyncTreeState = reactive({
    loading: false,
    /**搜索文字 */
    filterText: '',
    treeData: [] as any[],
    /**加载树的数据 */
    loadTreeData: () => {
        JxtechSyncTreeState.loading = true
        props.loadData().then((res: AxiosResponse<any[]>) => {
            JxtechSyncTreeState.treeData = res.data
        }).finally(() => {
            JxtechSyncTreeState.loading = false
        })
    },
    /**过滤数据 */
    filterNode(value: string, data: any) {
        if (!value) return true
        return data[props.treeProps.label].indexOf(value) !== -1
    },
    /**准备进行树的搜索 */
    onFilterTree: () => {
        ElTreeRef.value.filter(JxtechSyncTreeState.filterText)
    },
    /**节点点击事件 */
    onNodeClick: (row: any, column: any, event: Event) => {
        emit("node-click", row, column, event)
    }
})

onMounted(() => {
    JxtechSyncTreeState.loadTreeData()
})

defineExpose({
    // 重新加载树数据
    loadTreeData: () => {
        JxtechSyncTreeState.loadTreeData()
    }
})
</script>
<template>
    <el-card ref="jxtechSyncTreeRef" class="jxtech-sync-tree">
        <el-input
            v-show="1"
            placeholder="输入名称进行搜索"
            v-model="JxtechSyncTreeState.filterText"
            @keyup.enter="JxtechSyncTreeState.onFilterTree"
        >
            <template #suffix>
                <jxtech-svg-icon icon="#icon-sousuo1" :size="22" color="#005cac"></jxtech-svg-icon>
            </template>
        </el-input>
        <el-tree
            v-loading="JxtechSyncTreeState.loading"
            class="jxtech-sync-tree-container"
            ref="ElTreeRef"
            highlight-current
            :node-key="treeProps.id"
            :data="JxtechSyncTreeState.treeData"
            :props="treeProps"
            :default-expanded-keys="defaultExpandedKeys"
            :filter-node-method="JxtechSyncTreeState.filterNode"
            @node-click="JxtechSyncTreeState.onNodeClick"
        >
            <template #default="{ node, data }">
                <jxtech-svg-icon :icon="'#icon-attachent'" :size="24"></jxtech-svg-icon>
                <span class="jxtech-async-tree-node">
                    <span :title="node.label">{{ node.label }}</span>
                </span>
            </template>
        </el-tree>
    </el-card>
</template>

<style lang="scss" scoped>
.jxtech-sync-tree {
    resize: horizontal;
    position: relative;
    z-index: 999;
}
::v-deep(.el-card__body) {
    height: 100%;
}
.jxtech-sync-tree-container {
    overflow: auto;
    height: calc(100% - 40px);
}

::v-deep(.el-input__suffix-inner) {
    display: flex;
    align-items: center;
    > .icon {
        cursor: pointer;
        &:active {
            font-size: 21px !important;
        }
    }
}
::v-deep(.el-input) {
    margin-bottom: 20px;
}
</style>